/**
 * @author emontoro
 */


/** 
 * Nombre: menuModal
 * Descripción: Personaliza el icono de cierre de la ventana del menú, y
 * 				permite que esté fuera de la ventana
 */

function menuModal(titulo){

		var contenidoHTML = '<div id="guy2_title">';
		contenidoHTML = contenidoHTML + titulo;
//		contenidoHTML = contenidoHTML + '    Entrar';
		contenidoHTML = contenidoHTML + '    <div class="dialog-form-close"></div>';
		contenidoHTML = contenidoHTML + '</div>';

		$('body').append(contenidoHTML);
};


/** 
 * Nombre: contenidoModalEntrar
 * Descripción: Contenido de la pantalla de Login
 */
function contenidoModalEntrar(){


		var contenidoHTML = 			'<div id="login" title="Entrar" style="display: none;">';
		contenidoHTML = contenidoHTML + '	<p class="validateTips">Todos los campos son obligatorios.</p>';
		contenidoHTML = contenidoHTML + '	<form>';
		contenidoHTML = contenidoHTML + '		<fieldset>';
		contenidoHTML = contenidoHTML + '			<label for="email">Email</label>';
		contenidoHTML = contenidoHTML + '				<input type="text" name="email" id="email" value class="text ui-widget-content ui-corner-all" />';
		contenidoHTML = contenidoHTML + '			<label for="password">Contraseña</label>';
		contenidoHTML = contenidoHTML + '				<input type="text" name="password" id="password" value class="text ui-widget-content ui-corner-all" />';
		
		
		contenidoHTML = contenidoHTML + '		</fieldset>';
		contenidoHTML = contenidoHTML + '	</form>';
	
		contenidoHTML = contenidoHTML + '</div>';

		$('body').append(contenidoHTML);


};



/** 
 * Nombre: contenidoModalLogin
 * Descripción: Contenido de la pantalla de Registro
 */
function contenidoModalRegistrar(){

		/*************************************/
		/* Contenido de la pantalla de login */
		/*************************************/
		var contenidoHTML = 			'<div id="registro" title="Entrar" style="display: none;">';
		contenidoHTML = contenidoHTML + '	<p class="validateTips">Todos los campos son obligatorios.</p>';
		contenidoHTML = contenidoHTML + '	<div id="form_registro">';
		contenidoHTML = contenidoHTML + '	<div id="form_1" class="forms_registro">';
		contenidoHTML = contenidoHTML + '		<form>';
		contenidoHTML = contenidoHTML + '			<fieldset>';
		contenidoHTML = contenidoHTML + '				<label for="usuario">Usuario</label>';
		contenidoHTML = contenidoHTML + '				<input type="text" name="usuario" id="usuario" class="text ui-widget-content ui-corner-all">';
		contenidoHTML = contenidoHTML + '				<label for="email">Email</label>';
		contenidoHTML = contenidoHTML + '				<input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all">';
		contenidoHTML = contenidoHTML + '				<label for="password1">Password</label>';
		contenidoHTML = contenidoHTML + '				<input type="password" name="password1" id="password1" class="text ui-widget-content ui-corner-all">';
		contenidoHTML = contenidoHTML + '				<label for="password2">Repita Password</label>';
		contenidoHTML = contenidoHTML + '				<input type="password" name="password2" id="password2" class="text ui-widget-content ui-corner-all">';
		contenidoHTML = contenidoHTML + '			</fieldset>';
		contenidoHTML = contenidoHTML + '		</form>';
		contenidoHTML = contenidoHTML + '	</div>';

		contenidoHTML = contenidoHTML + '	<div id="form_2" class="forms_registro mapa_google">';
		contenidoHTML = contenidoHTML + '		<div id="mapa_google" title="Mapa de Google">';
		contenidoHTML = contenidoHTML + '			<div id="map_canvas" style="width:100%; height:100%"></div>';
		contenidoHTML = contenidoHTML + '		</div>';
		contenidoHTML = contenidoHTML + '	</div>';
		contenidoHTML = contenidoHTML + '	</div>';
		contenidoHTML = contenidoHTML + '</div>';


		$('body').append(contenidoHTML);
		
};



function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  map.setCenter(location);
};


/** 
 * Nombre: contenidoModalLogin
 * Descripción: Contenido de la pantalla de Registro
 */
function contenidoDialogError(textoError, selectorId){
	
	
		// Se trata el array de errores
		
		var mensaje = textoError.errors;

		var contenidoHtml = '';
		
		// Se recorren todos los errores
		for (var campo in mensaje ){
			//campo va tomando los nombres de las propiedades
			contenidoHtml = contenidoHtml + '	<p>';
			contenidoHtml = contenidoHtml + mensaje[campo];
			contenidoHtml = contenidoHtml + '	</p>';
			
			// Se marca el campo que produce el error
			$("[id="+selectorId+"] [id="+campo+"]").addClass("ui-state-error");
		}

		var contenidoHtmlCabecera	= '<div id="error" title="Error inesperado" style="display: none;">';
		var contenidoHtmlPie		= '</div>';
		var contenidoMensaje		= contenidoHtmlCabecera + contenidoHtml + contenidoHtmlPie;

		$('body').append(contenidoMensaje);
		
		$( "#error" ).dialog({
			autoOpen: false,
			modal: true,
			buttons: {
				Ok: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				$("#login #email" ).val("");
				$("#login #password" ).val("");
				$("#error").remove();
				$( this ).dialog( "destroy" );
			}
		});

}



function abrirModal(){
        //parametros principales


        var contenidoHTML = '<p>Tu contenido HTML aqui</p><button onclick=\"closeModal()\">Cerrar</button>';
        
        var ancho = 600; 
        var alto = 250;

//        $('#button').click(function(){
                // fondo transparente
                // creamos un div nuevo, con dos atributos
                var bgdiv = $('<div>').attr({
                                        class: 'bgtransparent',
                                        id: 'bgtransparent'
                                        });
                
                // agregamos nuevo div a la pagina
                $('body').append(bgdiv);
                
                // obtenemos ancho y alto de la ventana del explorer
                var wscr = $(window).width();
                var hscr = $(window).height();
                
                //establecemos las dimensiones del fondo
                $('#bgtransparent').css("width", wscr);
                $('#bgtransparent').css("height", hscr);
                
                // ventana modal
                // creamos otro div para la ventana modal y dos atributos
                var moddiv = $('<div>').attr({
                                        class: 'bgmodal',
                                        id: 'bgmodal'
                                        });     
                
                // agregamos div a la pagina
                $('body').append(moddiv);
                
                //Creamos el botón de cerrar.
                var modBarraSup = '<div class="mod-barra-sup"><a href="#" class="mod-cerrar">Cerrar</a></div>';
                $('#bgmodal').append(modBarraSup);
                
                
                // agregamos contenido HTML a la ventana modal
                $('#bgmodal').append(contenidoHTML);
                
                // redimensionamos para que se ajuste al centro y mas
                // dimensiones de la ventana del explorer 
                var wscr = $(window).width();
                var hscr = $(window).height();

                // estableciendo dimensiones de fondo
                $('#bgtransparent').css("width", wscr);
                $('#bgtransparent').css("height", hscr);
                
                // estableciendo tamaño de la ventana modal
                $('#bgmodal').css("width", ancho+'px');
                $('#bgmodal').css("height", alto+'px');
                
                // obtiendo tamaño de la ventana modal
                var wcnt = $('#bgmodal').width();
                var hcnt = $('#bgmodal').height();
                
                // obtener posicion central
                var mleft = ( wscr - wcnt ) / 2;
                var mtop = ( hscr - hcnt ) / 2;
                
                // estableciendo ventana modal en el centro
                $('#bgmodal').css("left", mleft+'px');
                $('#bgmodal').css("top", mtop+'px');

 };
        

function closeModal(){

        // removemos divs creados

        $('#bgmodal').remove();

        $('#bgtransparent').remove();

}